<template>        
    <div class="header-wrapper" ref="header-wrapper-ref">
        <div class="logo-part">
            <!-- <el-image :src="picImg"></el-image> -->
        </div>
        <div class="switch-part">
            <el-switch
                v-model="colorValue"
                class="ml-2"
                inline-prompt
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                active-text="暗黑"
                inactive-text="明亮"
                @change="changeColor(colorValue)"
            />
        </div>
    </div>
      
</template>

<script setup>
import {ref,reactive,defineEmits} from 'vue'
// import picImg from "../assets/img/Aj.png"
const colorValue = ref(true)


//  =================== swith切换后修改header和nav颜色 =========================
const emit = defineEmits(["changePorjectCorlor"])
const changeColor = (value)=> {
    console.log("切换后进入函数",value);
    if(value){
        // 切换为深色主题
        headerColor.value = "#2d353b"

    }else{
        // 切换为浅色主题
        headerColor.value = "#95d475"
    }
    emit("changePorjectCorlor",headerColor.value)
}

// 变量定义 --- 给scss中调用
const headerColor = ref("#2d353b")

</script>

<style scoped lang="scss">

.header-wrapper{
    // 变量定义
    width: 100%;
    height: 100%;
    // 变量使用
    background-color: v-bind(headerColor);
    .logo-part {
        float: left;
        :deep(.el-image){
            margin-left: 20px;
            margin-top: 5px;
            width: 50px;
        }
    }
    .switch-part{
        float: right;
        margin-top: 14px;
        margin-right: 10px;
    }
}

</style>